<!-- 机构主页 -->
<template>
	<view class="institution-container">
		<!-- 机构头部信息 -->
		<view class="header">
			<image class="institution-icon" :src="organizationsDetailData.image">
			</image>
			<view class="info-wrap">
				<view class="name">
					{{ organizationsDetailData.name }}
				</view>
				<view class="address">
					<image class="map-icon"
						src="https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1309.png">
					</image>
					{{ organizationsDetailData.address }}
					<image class="location-icon" src="/static/location-blue.png"></image>
					<image class="arrow-icon" src="/static/arrow-right.png"></image>
				</view>
				<view class="contact">
					<image class="phone-icon" src="/homepackge/static/phone.png"
						style="background-color: #3DD4A7;width: 24px;height: 24px;"></image>
					<image class="message-icon" src="/homepackge/static/headset.png"
						style="background-color: #FDBB78;width: 24px;height: 24px;"></image>
				</view>
			</view>
		</view>

		<!-- 机构简介 -->
		<view class="section">
			<view class="section-title">机构简介</view>
			<view class="intro-content">
				{{ organizationsDetailData.intro }}
			</view>
		</view>
		<!-- 医生团队卡包 -->
		<doctorteamcardpack :organizationsDetailData="organizationsDetailData" :institutionId="institutionId">
		</doctorteamcardpack>
		<!-- 服务包-------------不要了删除----------------------------- -->
		<!-- 		<servicepackAll ></servicepackAll> -->




	</view>
</template>

<script setup>
	// 点击首页的附近机构的跳转到这里，接收首页传来的参数
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		organizationsDetailApi
	} from '../../../api/nearbyLnstitutions';

	const institutionId = ref('');
	const organizationsDetailData = ref({});
	onLoad((options) => {
		console.log('接收到的参数:', options);
		// 接收机构ID和团队ID
		// institutionId.value = options._id;  是附近团队和附近机构 options._id;是团队主页的机构点击
		institutionId.value = options.orgId || options._id;
		const teamId = options.teamId;
		organizationsDetail(institutionId.value);
		// 如果有团队ID
		if (teamId) {
			console.log('当前团队ID:', teamId);
		}
	})


	// //获取一个机构详情
	function organizationsDetail() {
		organizationsDetailApi({
			_id: institutionId.value
		}).then(res => {
			if (res.code === 200) {
				console.log('机构详情数据:', res.data);
				organizationsDetailData.value = res.data;
			}
		})
	}
</script>

<style scoped>
	/* 整体容器 */
	.institution-container {
		padding: 30rpx;
		background-color: #fff;
	}

	.header {
		display: flex;
		margin-bottom: 30rpx;
	}

	.institution-icon {
		width: 240rpx;
		height: 240rpx;
		margin-right: 24rpx;
		border-radius: 16rpx;
		border: 2rpx solid #E6F2FF;
	}

	.info-wrap {
		flex: 1;
	}

	.name {
		font-size: 32rpx;
		line-height: 44rpx;
		color: #333;
		margin-bottom: 12rpx;
	}

	.address {
		display: flex;
		align-items: center;
		font-size: 16rpx;
		color: #999999;
		line-height: 54rpx;
		margin-bottom: 16rpx;
	}

	.location-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.map-icon {
		width: 24rpx;
		height: 24rpx;
		margin-right: 20rpx;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
		opacity: 0.6;
	}

	.contact {
		display: flex;
		gap: 16rpx;
	}

	.phone-icon,
	.message-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		padding-left: 16rpx;
		margin-bottom: 20rpx;
	}

	/* 机构简介 */
	.intro-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
</style>